<template>
	<view class="container">
		<view class="info">
			<view class="title">{{ title }}({{section_title}})</view>
			<view class="time">{{ start_time | formatDate }}</view>
			
			<!-- <view class="desc">
				<text v-for="(item, index) in seats" :key="index">
					<text v-if="item" style="margin-right: 15px">{{ item[0].row_number }}排¥{{ item[0].price }}</text>
				</text>
			</view> -->

		</view>

		<view class="dir-box">
			<image src="../../../static/2images/dir_img.png" mode=""></image>
		</view>
		<view class="prices">
			<template v-for="(item, index) in seats">
				<view class="price-item" @click="toggleChecked(item)" :key="index">
					<text>{{ item.region_number }}区</text>
					<!-- <text style="font-size: 40rpx;font-weight: bold;">¥{{ item.price }}</text> -->
				</view>
			</template>
		</view>
		<view class="desc" v-if="sel.length>0">
			<text>已选：</text>
			<text v-for="(item, index) in sel" :key="index">
				<text v-if="item"
					style="margin-right: 15px">{{item.region_number}}区{{ item.row_code }}排{{ item.col_code }}座 ¥{{item.price}}</text>
			</text>
		</view>
		<!-- <view class="seats">
			<view v-for="(item, index) in seats" :key="index" class="seat-list">
				<Seat v-for="(sub, idx) in item" :key="idx" :checked="sub.checked" :status="sub.status"
					@click="toggleChecked(sub)"></Seat>
			</view>
		</view> -->

		<view class="footer">
			<text class="font-color-red">￥{{ total }}</text>
			<view class="btn" @click="onSubmit">确认选择</view>
		</view>
		
		
	</view>
</template>

<script>
	import Seat from "./seat.vue";
	import {section_area} from "@/api/show";

	export default {
		components: {
			Seat
		},
		data() {
			return {
				id: '',
				title: '',
				section_title:'',
				remark: '',
				start_time: '',
				seats: [],
				sel: [],
				section_id:'',
				group_rate:1,//折扣率
				is_discount:'1',//打折否
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.id = options.id
			this.title = options.title
			this.section_title = options.section_title
			this.section_id = options.section_id
			console.info(options)
			this.remark = options.remark
			this.start_time = options.start_time
			this.is_discount = options.is_discount
			section_area(this.section_id).then(res=>{
				console.log('-----',res);
				this.seats = res.data.list
			})
			// performChoiceList(this.id).then(res => {
			// 	let {
			// 		data
			// 	} = res

			// 	// let seats = []
			// 	// data.forEach(item => {
			// 	// 	item.checked = false
			// 	// 	if (!seats[item.row_number]) {
			// 	// 		seats[item.row_number] = []
			// 	// 	}
			// 	// 	seats[item.row_number].push(item)
			// 	// })
			// 	this.seats = data
			// 	console.log(data)
			// })
			const uniqBy = (arr, key) => {
				return [...new Map(arr.map((item) => [item[key], item])).values()]
			}

			uni.$on('updateSeat', (res,region_number) => {
				let newSel = []
				this.sel.map(item => {
					if (item.region_number != region_number) {
						newSel.push(item)
					}
				})
				this.sel = newSel.concat(res)
				this.sel = uniqBy(this.sel, 'id')
				// 去重
				console.log(this.sel);
			})
		},
		computed: {
			total() {
				let total = 0
				this.sel.forEach(item => {
					// item.forEach(sub => {
					if (item.checked) {
						total += +item.price
					}
					// })
				})
				
				//计算折扣
				if(this.sel.length >= 5){
					if(this.sel.length >= 5 && this.sel.length < 10){
						this.group_rate = 0.95;
						//5-10张95折
					}else if(this.sel.length >= 10){
						this.group_rate = 0.9;//10张以上9折
					}
				}else{
					this.group_rate = 1.0;
				}
				if(this.is_discount == '0' || this.is_discount == 0){
					this.group_rate = 1.0;
				}
				total = total * this.group_rate;
				return total.toFixed(2)
			}
		},
		methods: {
			toggleChecked(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/2_development/show_buy_ticket/seat_selection1?id=${item.id}&show_id=${this.id}&region_number=${item.region_number}&sel=${JSON.stringify(this.sel)}&title=${this.title}&remark=${this.remark}&start_time=${this.start_time}&price=${item.price}&section_title=${this.section_title}&is_discount=${this.is_discount}`
				})
				// uni.navigateTo({
				// 	url: `/pages/2_development/show_buy_ticket/seat_selection1?id=${this.id}&title=${this.title}&remark=${this.remark}&start_time=${this.start_time}`
				// })
				// console.log(item)
				// item.checked = !item.checked
			},
			onSubmit() {

				let select_site = []
				let select = []

				this.sel.forEach(item => {
					// item.forEach(sub => {
						console.log(item);
					if (item.checked) {
						select_site.push(item.id)
						select.push(item)
					}
					// })
				})
				if (select_site.length == 0) {
					uni.showToast({
						title: '请选择座位',
						icon: 'none'
					})
					return
				}
				
				console.log('fffffffffffffffffff');

				uni.navigateTo({
					url: `/pages/2_development/show_buy_ticket/pay?id=${this.id}&title=${this.title}&start_time=${this.start_time}&remark=${this.remark}&select_site=${select_site.join(',')}&select=${JSON.stringify(select)}&section_id=${this.section_id}&is_discount=${this.is_discount}`
				})
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
	.footer {
		width: 100%;
		// height: 100rpx;
		background-color: #fff;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.info {
		background: #fff;
		padding: 20rpx 0;
	}

	.title {
		font-size: 32rpx;
		font-weight: 700;
		margin: 20rpx 30rpx 0;
	}

	.time {
		margin: 20rpx 30rpx;
		font-size: 24rpx;
		color: #82848f;
	}

	.desc {
		margin: 20rpx 30rpx;
		font-size: 24rpx;
		color: #f00;
	}

	.dir-box {
		background: #fff;
		padding: 30rpx;
		width: calc(100vw - 32px);
		height: 500rpx;
		border-radius: 56rpx;
		background: #fff;
		margin: 20rpx auto 0;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.16);

		image {
			height: 100%;
			width: 100%;
		}

		.dir-text {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #eee;
			border-radius: 10rpx;
		}
	}

	.desc {
		background: #fff;
		padding: 30rpx;
		width: calc(100vw - 32px);
		border-radius: 56rpx;
		background: #fff;
		margin: 0 auto 180rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.16);
		display: flex;
		flex-wrap: wrap;
		// margin-bottom: calc(200rpx + constant(safe-area-inset-bottom));
		// margin-bottom: calc(200rpx + env(safe-area-inset-bottom));;
	}

	.prices {
		background: #fff;
		padding: 30rpx;
		width: calc(100vw - 32px);
		border-radius: 56rpx;
		background: #fff;
		margin: 32rpx auto;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.16);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.price-item {
			width: 45%;
			background-color: rgba(205, 174, 27, .12);
			margin-bottom: 40rpx;
			height: 96rpx;
			font-size: 16px;
			color: #c96e1b;
			line-height: 96rpx;
			display: flex;
			justify-content: space-around;
			padding: 0 20rpx;
			text-align: center;

			&:first-child {
				width: 100%;
				background-color: rgba(216, 21, 21, .12);
				color: #D82C2C;
			}

			&:nth-child(2),
			&:nth-child(3) {
				background-color: rgba(201, 110, 27, .12);
				color: #C96E1B;
			}
		}
	}

	.seats {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 30rpx;
		background: #fff;
		margin: 20rpx 0;

		.seat-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
</style>
